<template>
	<view class="index">
		<view class="create-container">
			<!-- <input
				v-model="inputObject.content"
				placeholder="请输入内容"
				class="input-area"
				placeholder-class="input-placeholder"
			/> -->
			<textarea
				v-model="inputObject.content"
				placeholder="请输入内容..."
				class="text-area"
				placeholder-class="textarea-placeholder"
				maxlength="500"
			/>
			<div class="date-container">
				<!-- <button size="mini" class="chooseDate" @touchstart="chooseDate" type="primary">选择日期</button> -->
				<text>选择日期：</text>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="dateChange">
					<view class="currentDate">{{ date }}</view>
				</picker>
			</div>

			<button size="mini" class="submit" @touchstart="handleSubmit">提交</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			inputObject: {
				id: '',
				content: '',
				date: '',
				isDone: '',
				isChoose: '',
			},
			// temp:[]
			date: currentDate
		};
	},
	components: {},

	onLoad() {},
	onReady() {},
	onShow() {},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		...mapMutations(['addToList', 'addTodateList']),
		//点击提交时的操作
		handleSubmit() {
			if (!this.inputObject.content.trim()) {
				uni.showToast({
					icon: 'none',
					title: '内容不能为空',
					duration: 1200
				});
				this.inputObject.content = '';
			} else {
				uni.showLoading({
					title: '提交中'
				});
				let time = Math.random() * 1000;
				setTimeout(() => {
					this.inputObject.id = new Date()
						.getTime()
						.toString()
						.substr(9);
					this.inputObject.date = this.date;
					this.inputObject.isDone = false;
					this.inputObject.isChoose = false;
					let object = JSON.parse(JSON.stringify(this.inputObject));
					this.addToList(object);
					this.addTodateList(this.inputObject.date);
					for (let key in this.inputObject) {
						this.inputObject[key] = '';
					}
					// 初始化时间
					this.date = this.getDate();
					uni.hideLoading();
				}, time);
			}
		},

		//设置时间
		setDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let hour = date.getHours();
			let minute = date.getMinutes();
			let second = date.getSeconds();
			month = month < 10 ? `0${month}` : month;
			day = day < 10 ? `0${day}` : day;
			hour = hour < 10 ? `0${hour}` : hour;
			minute = minute < 10 ? `0${minute}` : minute;
			second = second < 10 ? `0${second}` : second;
			return `${year}/${month}/${day} ${hour}:${minute}:${second}`;
		},
		//获取日期
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		//选择日期
		dateChange(e) {
			// this.date = e.target.value;
			if (e.target.value < this.getDate()) {
				uni.showToast({
					icon:"none",
					title: '过期了呀~~',
					duration: 2000
				});
			} else {
				this.date = e.target.value;
			}
		}

	},
	watch: {}
};
</script>

<style lang="less">
.index {
	padding: 20rpx;
	box-sizing: border-box;
	.create-container {
		display: flex;
		margin-top: 100rpx;
		flex-wrap: wrap;
		position: relative;
		// .input-area {
		// 	padding-left: 10rpx;
		// 	width: 70%;
		// 	border: 1rpx solid #c8c7cc;
		// 	border-radius: 10rpx;
		// 	box-sizing: border-box;
		// 	height: 70rpx;
		// 	font-size: 28rpx;
		// 	color: #999999;
		// }
		// .input-placeholder {
		// 	font-size: 26rpx;
		// 	text-align: center;
		// }
		.date-container {
			height: 70rpx;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			color: #666;
			.currentDate {
				padding: 10rpx;
				color: #c8c7cc;
				border: 1px solid #c8c7cc;
				border-radius: 10rpx;
				box-sizing: border-box;
				box-shadow: 0 0 5rpx 2rpx #555;
			}
		}

		.submit {
			color: white;
			height: 70rpx;
			background-color: #4daf7c;
			line-height: 70rpx;
			font-size: 28rpx;
			margin: 0;
			margin-top: 30rpx;
			margin-left: 80%;
		}
		.text-area {
			width: 100%;
			margin-top: 20rpx;
			padding-left: 10rpx;
			border: 1rpx solid #c8c7cc;
			border-radius: 10rpx;
			box-sizing: border-box;
			height: 700rpx;
			font-size: 40rpx;
			color: #000;
		}
		.textarea-placeholder {
			font-size: 35rpx;
		}
	}
}
</style>
